<template>
  <div class="project-approval">
    <div class="project-approval-child">
      <table>
          <tr>
              <td colspan="4">费用申请表</td>
          </tr>
          <tr>
              <td>费用名称</td>
              <td>{{ tabledata.applyName }}</td>
              <td>申请日期</td>
              <td>{{ parseTime(tabledata.applyTime, '{y}-{m}-{d}') }}</td>
          </tr>
          <tr>
              <td>费用归属</td>
              <td><dict-tag :options="dict.type.sys_data_ascription" :value="tabledata.applyAscription"/></td>
              <div v-if="tabledata.applyAscription === '0'">
                <td>所属人</td>
                <td>{{ filterData(ownerList, "userId", tabledata.userId, "userName") }}</td>
              </div>
              <div v-if="tabledata.applyAscription === '2'">
                <td>所属小组</td>
                <td><dict-tag :options="dict.type.crm_group" :value="tabledata.groupId"/></td>
              </div>
              <div v-if="tabledata.applyAscription === '1'">
                <td>所属部门</td>
                <td>{{ filterData(deptList, "deptId", tabledata.deptId, "deptName") }}</td>
              </div>
          </tr>
          <tr>
              <td>客户名称</td>
              <td>{{ filterData(customerList, "customerId", tabledata.customerId, "customerName") }}</td>
              <td>商机名称</td>
              <td>{{ filterData(orderList, "orderId", tabledata.orderId, "orderName") }}</td>
          </tr>
          <tr>
              <td colspan="4">项目预算成本费用支出及税金</td>
          </tr>
          <tr class="moneytitle">
              <td>报销项目</td>
              <td colspan="2">摘要</td>
              <td>金额</td>
          </tr>
          <tr v-for="item in tabledata.detailList" :key="item.detailsId" class="list">
              <td>{{ item.detailsName }}</td>
              <td colspan="2">{{ item.detailsSummary }}</td>
              <td>{{ item.detailsAmount }}</td>
          </tr>
          <tr>
              <td>合计金额</td>
              <td style="width: 24%" colspan="3">{{ tabledata.amount }}</td>
          </tr>
          <tr>
              <td>备注</td>
              <td colspan="3">{{ tabledata.remark }}</td>
          </tr>
          <tr v-for="(task, index) in tabledata.hisTaskList" :key="index">
            <td style="padding: 0; margin: 0;">审核人签名</td>
            <td colspan="3" style="text-align: left; padding: 0; margin: 0;">
              <el-image  :src="task.signature"  style="height: 80px">
                <div slot="error" class="image-slot">
                  
                </div>
              </el-image>
            </td>
          </tr>
      </table>
    </div>
  </div>
</template>

<script>
import { listDept } from '@/api/system/dept'
export default {
  dicts: ["sys_audit_status", "sys_data_ascription", "is_adjust", "crm_group"],
  props:{
    tabledata:{
      type:Object,
      default:{}
    },
    ownerList:{
      type:Array,
      default:[]
    },
    customerList:{
      type:Array,
      default:[]
    },
    orderList: {
      type:Array,
      default:[]
    }
  },
  data() {
    return {
      // qm: qmImg,
      projectNature:[{
        value:"0",
        text:"过单项目"
      },{
        value:"1",
        text:"公司直签项目"
      }],
      laborContracts:[{
        value:"0",
        text:"治桔"
      },{
        value:"1",
        text:"枢纽"
      },{
        value:"2",
        text:"无合同"
      },{
        value:"3",
        text:"纯返利"
      },{
        value:"4",
        text:"诚石"
      }],
      deptList: []
    }
  },

  methods:{
    listDept(){
      listDept().then(res => {
        this.deptList = res.data
      })
    },
    filterData(arr, arrfiled, filed, returnfiled) {        
        if (filed) {
           const filedStr = String(filed);
          const filedArray = filedStr.split(",");

          const res = arr
            .filter(item => filedArray.includes(String(item[arrfiled])))
            .map(item => item[returnfiled]);

          return res.join(",");
        }

        return '';
      }

  },
  created(){
    this.listDept()
  }
}
</script>
<style scoped>
  /* .project-approval{
    position: relative;
    
  }
  .project-approval-child{
    position: absolute;
    top: -100px;
    left: 0;
  } */
  .head-content{
      display: flex;
  }
  .deptname,.project-no{
      width: 50%;
      text-align: left;
      font-weight: bold;
      padding-left: 10px;
  }
  /* .project-no{
      width: 50%;
  } */
  h2{
      text-align: center;
      height: 50px;
      line-height: 50px;
      font-weight: bold;
  }
  table{
      width: 100%;
      border: 1px solid #000;
      border-collapse: collapse;
      border-spacing: 0;
  }
  td{
      border: 1px solid #000;
      height: 30px;
      line-height: 30px;
      text-align: center;
  }
  td:nth-child(odd){
      width: 24%;
      font-weight: bold;
  }
  td:nth-child(even){
      width: 26%;
  }
  .qddw{
    display: inline-block;
    margin-left: 5%;
  }
  .moneytitle td,.glyj td{
    line-height: 3;
  }
  .moneytitle td:nth-child(even){
    font-weight: bold;
  }
  .list td:nth-child(odd){
    font-weight: normal;
  }
</style>